Trò chơi trí óc trong JavaScript
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>The Last Cities | BrainStorm</title>
6 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
8 <link rel="stylesheet" href="game-css.css" type="text/css">
9 <link rel="stylesheet" href="../Alert/alertcss.css">
10 <script src="games-js.js" type="text/javascript"></script>
11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
12 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
13
14 <script type="text/javascript">
15 var count = 0;
16 var fix = 0;
17 var noOfClick = 0;
18 var result = [2, 3, 5, 6, 1, 2, 3, 6, 1, 3, 5, 6, 1, 3, 4, 5];
19
20 function flip_task() {
21 document.getElementById('cities-list').classList.add('off');
22 document.getElementById('task').classList.add('on');
23 }
24
25 var task = 1;
26 function flip_option(check) {
27 var ans = [0, 1, 1, 0];
28 if (check == ans[task - 1]){
29 document.getElementById('flip-img').classList.add("on");
30 document.getElementById('correct').classList.add("on");
31 setTimeout(function(){
32 document.getElementById('correct').classList.remove("on");
33 document.getElementById('flip-img').classList.remove("on");
34 }, 200);
35 }
36 else {
37 document.getElementById('flip-img').classList.add("on");
38 document.getElementById('wrong').classList.add("on");
39 setTimeout(function(){
40 document.getElementById('wrong').classList.remove("on");
41 document.getElementById('flip-img').classList.remove("on");
42 }, 200);
43 }
44 document.getElementById('task').classList.remove('on');
45 document.getElementById('option-list').classList.add('on');
46 task ++;
47 document.getElementById('task-img').src = "rtw-img/Task" + task + ".png";
48 }
49
50 var cities_list = 1;
51 function next_list(check) {
52 if (cities_list < 4){
53 document.getElementById('option-list').classList.remove('on');
54 document.getElementById('cities-list').classList.remove('off');
55
56 if (cities_list == 3){document.getElementById('end-btn').innerHTML = "END";}
57 }
58 else {
59 document.getElementById('score1').innerHTML = "" + count;
60 document.getElementById('scoreDB').value = count;
61 document.getElementById('main-screen').style.display = "none";
62 document.getElementById('end-screen').classList.add("on");
63 }
64 cities_list ++;
65 document.getElementById('list-no').innerHTML = cities_list + "/4";
66 document.getElementById('image').src = "rtw-img/Picture" + cities_list +".png";
67
68 var i;
69 for (i =1; i<=6; i++){
70 document.getElementById('image' + i).src = "rtw-img/Picture" + cities_list + "-op" + i + ".png";
71 document.getElementById('image' + i).classList.remove('off');
72 }
73 if (check == 1){
74 fix = fix + 4;
75 noOfClick = 0;
76 }
77 }
78
79 function ansCheck(ans) {
80 var flag = 0;
81 var i;
82 for (i =fix; i<fix + 4; i++){
83 if (ans == result[i]){
84 flag = 1;
85 break;
86 }
87 else {flag = 0;}
88 }
89 if (flag == 1){
90 document.getElementById('flip-img').classList.add("on");
91 document.getElementById('correct').classList.add("on");
92 setTimeout(function(){
93 document.getElementById('correct').classList.remove("on");
94 document.getElementById('flip-img').classList.remove("on");
95 }, 300);
96 document.getElementById('image' + ans).classList.add('off');
97
98 if (count > 750){count = count + 150;}
99 else if (count > 350 && count < 750){count = count + 100;}
100 else {count = count + 50;}
101 document.getElementById('score').innerHTML = "" + count;
102 }
103 else {
104 document.getElementById('flip-img').classList.add("on");
105 document.getElementById('wrong').classList.add("on");
106 setTimeout(function(){
107 document.getElementById('wrong').classList.remove("on");
108 document.getElementById('flip-img').classList.remove("on");
109 }, 300);
110 document.getElementById('image' + ans).classList.add('off');
111 }
112
113 noOfClick++;
114 if (noOfClick == 4){
115 fix = fix + 4;
116 noOfClick = 0;
117 next_list(0);
118 }
119 }
120
121 function end_screen() {
122 document.getElementById('score1').innerHTML = "000";
123 }
124 </script>
125
126 <script type="text/javascript">
127 $(document).ready(function(){
128 var lastScore = $.cookie("lastCities");
129 $("#lastScore").text(lastScore);
130
131 var per = $.cookie("memory");
132 $("#per").text(per);
133 });
134 </script>
135
136 </head>
137 <body style="background-color: #2c3e50">
138
139 <div id="start-screen">
140 <div class="row">
141 <div class="col half-wider"><h1>The Last Cities <span class="info">(MEMORY)</span></h1></div>
142 <div class="col half-narrow">
143 <a id="ON" class="btn-circle hoverable" onclick="video_on()"><i class="material-icons"></i></a>
144 <a id="OFF" class="btn-circle hoverable off" onclick="video_off()"><i class="material-icons"></i></a>
145 </div>
146 </div>
147
148 <video id="video" width="500" height="415" controls>
149 <source src="true-color-img/Rec.mp4" type="video/mp4">
150 </video>
151
152 <div id="info" class="card">
153 <div class="row">
154 <div class="col half">
155 <span class="material-icons blue-text"></span>
156 <span id="lastScore" class="num">1250</span>
157 <span class="info black-text">LAST SCORE</span>
158 </div>
159 <div class="col half">
160 <span class="material-icons blue-text"></span>
161 <span id="per" class="num">50%</span>
162 <span class="info black-text">MEMORY</span>
163 </div>
164 </div>
165 <div class="divider"></div>
166
167 <div class="row black-text left-align">
168 <span class="num"> GAME BENEFIT :</span>
169 <ul>
170 <li>Exercises your ability to temporarily hold information in memory.</li>
171 <li>Exercises your multitasking and task-switching skills.</li>
172 </ul>
173 </div>
174
175 <div class="row black-text left-align">
176 <span class="num"> Instructions <span class="info black-text">(click on info button for video)</span> :</span>
177 <ol>
178 <li>Memorize the cities on the board.</li>
179 <li>You will be asked to perform an unrelated task.</li>
180 <li>Recall as many of the original cities as possible.</li>
181 </ol>
182 </div>
183
184 </div>
185
186 <a class="btn start hoverable" onclick="startRTW()">PLAY GAME</a>
187 </div>
188
189 <div id="main-screen" class="off">
190 <div class="row">
191 <span class="timer">
192 <a id="button-stop" class="btn pause left material-icons" onclick="pauseRTW()"></a>
193 <a id="button-play" class="btn pause left material-icons off" onclick="playRTW()"></a>
194 <span id="list-no" class="num white-text" style="display: inline-block">1/4</span>
195 <a id="score" class="btn score right">000</a>
196 </span>
197 </div>
198
199 <div id="wait-screen" class="card waiting">
200 <div class="waring">
201 <span class="waring-i"></span>
202 <span class="waring-dot"></span>
203 </div>
204 <h1 class="black-text">Are you sure to exit?</h1>
205 <span class="num black-text">You will not able to record your score!</span>
206 <div class="row" style="margin-top: 40px">
207 <a class="btn green" onclick="playRTW()">No</a>
208 <a class="btn red" onclick="end_screen(); flip_endCard();">Yes</a>
209 </div>
210 </div>
211
212 <div id="flip-img" class="card waiting transparent">
213 <a id="correct" class="btn-circle check green"><i class="material-icons"></i></a>
214 <a id="wrong" class="btn-circle check red"><i class="material-icons"></i></a>
215 </div>
216
217 <div id="cities-list">
218 <img id="image" src="rtw-img/Picture1.png">
219 <br/>
220 <a class="btn ready green hoverable" onclick="flip_task()">I'M READY</a>
221 </div>
222
223 <div id="task" class="off">
224 <img id="task-img" src="rtw-img/Task1.png">
225 <div class="center-align">
226 <a class="btn red hoverable" onclick="flip_option(0)">NO</a>
227 <a class="btn green hoverable" onclick="flip_option(1)">YES</a>
228 </div>
229 </div>
230
231 <div id="option-list" class="center-align off">
232 <img id="info-img1" class="rtw-info-img" src="rtw-img/info-img1.png">
233 <div class="card-option">
234 <img id="image1" class="rtw-img" src="rtw-img/Picture1-op1.png" onclick="ansCheck(1)">
235 <img id="image2" class="rtw-img" src="rtw-img/Picture1-op2.png" onclick="ansCheck(2)">
236 <img id="image3" class="rtw-img" src="rtw-img/Picture1-op3.png" onclick="ansCheck(3)">
237 <img id="image4" class="rtw-img" src="rtw-img/Picture1-op4.png" onclick="ansCheck(4)">
238 <img id="image5" class="rtw-img" src="rtw-img/Picture1-op5.png" onclick="ansCheck(5)">
239 <img id="image6" class="rtw-img" src="rtw-img/Picture1-op6.png" onclick="ansCheck(6)">
240 </div>
241 <img id="info-img" class="rtw-info-img" src="rtw-img/info-img.png">
242 <a id="end-btn" class="btn ready green hoverable" onclick="next_list(1)">SKIP</a>
243 </div>
244
245 </div>
246
247 <div id="end-screen" class="off">
248 <div class="card">
249 <div class="row">
250 <span id="best-score" class="num green-text off">BEST NEW SCORE</span>
251 <span class="material-icons blue-text"></span>
252 <h1 class="black-text" id="score1" style="margin: 0">000</h1>
253 <span class="info black-text">YOUR SCORE</span>
254 <div class="divider"></div>
255
256 <div class="card bg-green">
257 <div class="row left-align">
258 <span class="num white-text">SUCCESS RATE :</span>
259 <ul><span class="info">Your success rate is 72%. Well done!
260 Only 18% of the users at this rank do this well.</span></ul>
261 </div>
262 </div>
263
264 <div class="divider"></div>
265 </div>
266 <div class="row">
267 <form action="../gameScore" method="post">
268 <input name="gameId" type="hidden" value="lastcities">
269 <input name="score" id="scoreDB" type="hidden" value="0">
270 <input class="btn continue hoverable" type="submit" value="Continue"></input>
271 </form>
272 </div>
273 </div>
274 </div>
275
276 </body>
277 </html>
